<template>
  <view class="navbar" :style="{ paddingTop: statusBarHeight + titleBarHeight + 'px' }">
    <view class="navbar-header">
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="title-bar" :style="{ height: titleBarHeight + 'px' }">
        <view class="back-btn width-class">
          <view class="left_icon">
            <view @click="_navback" v-if="navbarData.flag == 1"><i class="iconfont icon-jiantouxiangzuo"></i></view>
            <!-- 编辑地址，新增和编辑返回到列表 -->
            <view @click="_backAddressList" v-if="navbarData.flag == 2"><i class="iconfont icon-jiantouxiangzuo"></i>
            </view>
            <view @click="_backAddressDefault" v-if="navbarData.flag == 3"><i class="iconfont icon-jiantouxiangzuo"></i>
            </view>
          </view>
        </view>

        <block>
          <view class="logo" v-if="navbarData.name">
            <text class="navbarTitle">{{ navbarData.name ? navbarData.name : storeName }}</text>
          </view>
          <view class="logo" v-else>
            <image :src="getLogo" mode="aspectFit"></image>
          </view>
        </block>
        <view class="width-class transparent"></view>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    SYSTEM_INFO
  } from '@/utils/constant';
  export default {
    props: {
      navbarData: {
        //navbarData   由父页面传递的数据，变量名字自命名
        type: Object
      }
    },

    data() {
      return {
        nowPages: '',
        previousPages: '',
        share: '',
        height: 0,
        statusBarHeight: 0,
        titleBarHeight: 0
        //默认值  默认显示左上角
      };
    },

    computed: {
      getLogo() {
        return this.$store.state.storeLogo;
      },
      storeName() {
        return this.$store.state.storeName;
      }
    },

    mounted() {
      this.share = getApp().globalData.share;
      let pages = getCurrentPages();
      //当前页面
      var currPage = pages[pages.length - 1];
      this.nowPages = currPage.route;
      //上一级页面
      let prevPage = pages[pages.length - 2];
      if (prevPage == undefined) {
        this.share = 'false';
      }

      let systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight;
      let rect = uni.getMenuButtonBoundingClientRect ? uni.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息
      uni.getMenuButtonBoundingClientRect();
      let navBarHeight = (function() {
        //导航栏高度
        let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距
        return 2 * gap + rect.height;
      })();
      this.titleBarHeight = navBarHeight;
    },

    methods: {
      // 返回上一页面
      _navback() {
        uni.navigateBack();
      },

      // 返回地址列表页
      _backAddressList() {
        //0 列表 1新增 2编辑 (显示列表)
        this.$emit("hasGetAddress",false)
        this.$emit('currentPage', 0);
      },
      _backAddressDefault() {
        this.$emit('setDeafaultAddress')
      },
    }
  };
</script>

<style lang="less">
  .navbar {
    box-sizing: border-box;
    background: #fff;
  }

  .navbar-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 8;
    background-color: #fff;
  }

  .status-bar {
    background: #fff;
  }

  .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title-bar .back-btn,
  .title-bar .tablet {
    // width: 116px;
    // margin-left: 12px;
    padding-left: 24rpx;
  }

  .body {
    height: 100%;
    overflow: auto;
  }

  .scroll-content {
    text-align: center;
  }

  .scroll-content .item {
    height: 60rpx;
    line-height: 60rpx;
    border-bottom: 1rpx solid #eee;
  }

  .navbar-v-line {
    width: 1px;
    height: 38rpx;
    background-color: #e5e5e5;
    margin: 12rpx 16rpx 0 8rpx;
  }

  .navbarTitle {
    font-size: 36rpx;
    color: black;
  }

  .width-class {
    width: 80rpx;
  }

  .transparent {
    opacity: 0;
  }

  .logo {
    display: flex;
    justify-content: center;
    width: 33%;
    position: absolute;
    left: 34%;
    font-size: 26rpx;
  }

  .logo image {
    max-height: 50rpx;
  }

  .icon-jiantouxiangzuo {
    font-size: 56rpx;
    color: #444;
    margin-left: -16rpx;
  }

  .icon-wap-home {
    font-size: 44rpx;
    margin-top: 6rpx;
    color: #444;
    display: inline-block;
  }

  .left_icon {
    display: flex;
  }

  .icon-fangdajing {
    font-size: 45rpx;
  }

  .content {
    font-size: 30px;
  }
</style>
